<?php
$query = "select * from tbl_period";
$result = mysql_query($query);
?>
<style type="text/css">
.hide{
	display:none;
}
.show{
	display:block;
}
</style>
<script type="text/javascript" >
function opendialog(obj,type,trunk,notrunk,date){
	openalertdialog(obj,type,trunk,notrunk,date);
}
function openalertdialog(id,type,trunk,notrunk,date){
	jQuery("#dialog").dialog("destroy");
	jQuery("#dialog").dialog({
		resizable: false,
		height:148,
		modal: true,
		buttons: {
				'Delete': function() {
					jQuery.post("/aec1/pages/update_cprofile.php",{name:type,id:id,trunk:trunk,notrunk:notrunk,enddate:date},function(data){
						jQuery('#bill_del'+id).hide(function(){
								jQuery('#bill_del'+id).remove();
						});
						$( "#dialog:ui-dialog" ).dialog( "destroy" );
						$( "#dialog-message" ).dialog({
						modal: true,
						buttons: {
							Ok: function() {
								$(this).dialog( "close" );
							}
						}
						});
					});
					
					jQuery(this).dialog('close');
				},
				Cancel: function() {
					jQuery(this).dialog('close');
				}
			}
		});
}
function editbill(id,name){
	$(".billList"+name).removeClass( 'show').addClass('hide');
	if(name == 'billperiod'){
  	$.post("/aec1/pages/edit_bill.php",{bill_id:id},function(data){
  		if(data!=''){
  			$('.editBill').append(data);
  			}
  	});
  	}
}
</script>

<!-- ui-dialog -->
<div id="dialog-message" title="Success Delete" style="display:none;">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		Selected record has been deleted successfully.
	</p>
</div>
<div id="dialog" title="Dialog Title" style="display:none">
	<p>Are you sure, you want to delete the selected item?</p>
</div>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Billing Periods</a></li>
		<li><a href="#tabs-2">DCSP</a></li>
		<li><a href="#tabs-3">IXC</a></li>
	</ul>
	<div id="tabs-1">
		<div class="billListbillperiod">
			<div><h3>List Of Billing Periods</h3></div><a href='index.php?page=new-billing-period'>Add New</a>
			<table cellspacing='2' cellpadding='5'>
				<tr style="background-color:#0673C5;color:#FFFFFF;">
					<td>Start Date</td>
					<td>End Date</td>
					<td>p_split_trunk</td>
					<td>p_split_no_trunk</td>
					<td>Actions</td>
				</tr>
				<? while($bill = mysql_fetch_array($result)){?>
				<tr id="bill_del<?=$bill['p_id'];?>" style="background-color:#E6E9F2;">
					<td><?=$bill['p_start_date']?></td>
					<td><?=$bill['p_end_date']?></td>
					<td><?=$bill['p_split_trunk']?></td>
					<td><?=$bill['p_split_no_trunk']?></td>
					<td>
					<span class="ui-icon ui-icon-pencil" title="Edit" onclick="editbill(<?=$bill['p_id'];?>,'billperiod')" style="float:left;cursor:pointer"></span>
					<a href="javascript:void(0)" onclick="opendialog(<?=$bill['p_id'];?>,'delete bill','<?=$bill['p_split_trunk']?>','<?=$bill['p_split_no_trunk']?>','<?=$bill['p_end_date']?>')" class="ui-corner-all" title="Delete"><span class="ui-icon ui-icon-trash"></span></a>
					</td>
				</tr>
				<?}?>
			</table>
			</div>
		</div>
		<div class="editBill"></div>
	<div id="tabs-2">
		<p>Form2 Info.</p>
	</div>
	<div id="tabs-3">
		<p>Form3 Info.</p>
	</div>
</div>